<template>
    <div class="header-contaniner">
        <div class="header">
            <div class="header-box flex-between">
                <div class="logo">
                    <router-link :to="{path:'/'}"><img :src="logo" alt="logo" /></router-link>
                </div>
                <div class="menu flex-between">
                    <template v-for="(item, index) in meun">
                        <router-link :key="index" :to="item.path">
                            {{ item.meta.title }}
                        </router-link>
                    </template>
                </div>
                <div class="login flex-center">
                    <template v-if="user">
                        <div class="flex-center">
                            <!-- <div @click="message" class="login-item flex-center">
                                <span class="iconfont icon-letter icon"></span>
                            </div> -->
                            <div class="user-name flex-center login-item" @click="userCenter">
                                <el-avatar size="medium" :src="user.F_HeadIcon" fit="contain" icon="el-icon-user-solid"></el-avatar>
                                <span class="user-text">{{user.F_RealName}}</span>
                            </div>
                            <div class="logout flex-center login-item" @click="Logout">
                                <span class="iconfont icon-tuichux icon logout-icon"></span>
                                <span class="user-text" style="color:rgb(153, 153, 153);">Logout</span>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <el-button-group>
                            <el-button type="primary" size="small" @click="$router.push({path:'/login'})" style="background-color:#fff;color:#2d9ef3;">Sign in</el-button>
                            <el-button type="primary" size="small" @click="$router.push({path:'/register'})">Register</el-button>
                        </el-button-group>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Header",
    props: {
        meun: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        user() {
            return this.$store.state.user || false;
        }
    },
    data() {
        return {
            logo: window.cdns.logo,
            defaultAvatar:window.cdns.header_user_img
        };
    },
    methods: {
        Logout() {
            this.$store.dispatch("Logout").then(() => {
				this.$router.push({path:'/login'})
			});
        },
        userCenter() {
            this.$router.push({
                path: "/user"
            });
        },
        message() {
            this.$router.push({
                path: "/user/leavingMmessage"//"/user/message"
            });
        }
    }
};
</script>